<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="search-form divClass" v-if="headerShow">
                <div>
                    <a-form :model="pageData" layout="inline" size="small">
                        <a-form-item label="车间" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.workshop" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="当班日期" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-date-picker  popup-container="html"  class="bacClass" v-model="pageData.beginDate" allow-clear />
                        </a-form-item>
                        <!-- <a-form-item label="班次">
                            <a-select popup-container="html"   class="bacClass" :allowClear="true" v-model="pageData.shift"
                                :filter-option="false" allow-search>
                                <a-option>白班</a-option>
                                <a-option>夜班</a-option>
                            </a-select>
                        </a-form-item> -->
                        <a-form-item label="班次" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-select popup-container="html"  class="bacClass" :allowClear="true" v-model="pageData.workteam" :filter-option="false"
                                allow-search>
                                <a-option>A班</a-option>
                                <a-option>B班</a-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="配方单号" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" v-model="pageData.formulaCode" allow-clear
                                @press-enter="huiche"></a-input>
                        </a-form-item>
                        <a-form-item label="流转卡号" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.circulatCard" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="品名" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.brandName" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="色号" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.colorCode" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="色称" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.colorName" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="设备编号" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.machineCode" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="员工工号" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" v-model="pageData.userCode" allow-clear
                                @press-enter="huicheYG"></a-input>
                        </a-form-item>
                        <a-form-item label="员工姓名" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.userName" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="计划单号" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.planOrderCode" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="客户名称" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.customName" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="匹数" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.horseNum" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="作业性质" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.workNature" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="总步骤数" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.stepTotalNum" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="工艺时间" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.processTime" allow-clear></a-input>
                        </a-form-item>
                        <a-form-item label="重量" :style="{ width: '270px' }" label-col-flex="70px">
                            <a-input class="bacClass" disabled v-model="pageData.weight" allow-clear></a-input>
                        </a-form-item>
                    </a-form>
                </div>
            </div>
            <div style="float: right;">
                <Toolbar :items="toolbarList" @saveData=save @delQk=qingkong>
                </Toolbar>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
        </template>
        <template #pageTabel>
            <!-- <a-tabs   :justify="true" :default-active-key="tabsKeys" @change="tabsChanges">
                <a-tab-pane> -->
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
                style="height:100%" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList"
                :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
            <!-- <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                @change="PageSize" @page-size-change="change" style="justify-content: center"
                :page-size="pagination.pageSize" :current="pagination.page" /> -->
            <!-- </a-tab-pane>
            </a-tabs> -->
        </template>

    </pageTabelLayout>
</template>
<script setup lang="ts">
import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
} from "@/hooks/table";
import { ref, reactive } from "vue"
import { post, get } from "@/api/http"
import { localeText } from '@/api/aggridZw'

import Toolbar from "@/components/Toolbar.vue"
import { Message, Modal } from "@arco-design/web-vue"
import { FormInstance } from "@arco-design/web-vue/es/form";
const toolbarList: any = ref(['车间扫描查询跳转', '清空', '读取IC卡', '保存'])
const loading = ref(false);
const headerShow = ref(true)
const tableDataList = ref([])


const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
}
const localeText1: any = ref(localeText)
const tc = [
    {
        showRowGroup: 'hide_def',
        "headerName": "",
        "checkboxSelection": true,
        "headerCheckboxSelection": true,
        "pinned": "left",
        "width": 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: "left",
    },
    {
        headerName: '程序号',
        field: 'programNo',
        width: 150,
        filter: 'programNo',
    },
    {
        headerName: '程序名称',
        field: 'programName',
        width: 150
    },
    {
        headerName: '步骤号',
        field: 'stepNo',
        width: 150
    },
    {
        headerName: '步骤名称',
        field: 'stepName',
        width: 150
    },

]

const pageData = reactive<{
    pageLoading: boolean,
    workshop: any,

    beginDate: any,
    endDate: any,
    shift: any,
    workteam: any,
    formulaCode: any,
    circulatCard: any,
    brandName: any,
    colorCode: any,
    colorName: any,
    machineCode: any,
    userCode: any,
    userName: any,
    customName: any,
    horseNum: any,
    weight: any,
    workNature: any,
    stepTotalNum: any,
    processTime: any,
    planOrderCode: any,
    crockCalorieId: any,
    userId: any,
    DyeFormulaYieldDetail: any[],
}>({
    pageLoading: false,
    workshop: '',

    beginDate: '',
    endDate: '',
    shift: '',
    workteam: '',
    formulaCode: '',
    circulatCard: '',
    brandName: '',
    colorCode: '',
    colorName: '',
    machineCode: '',
    userCode: '',
    userName: '',
    customName: '',
    horseNum: '',
    weight: null,
    workNature: '',
    stepTotalNum: null,
    processTime: '',
    planOrderCode: '',
    crockCalorieId: null,
    userId: null,
    DyeFormulaYieldDetail: [],
});



// const selectHandler = () => {
//     doRefresh()
// }
const huicheYG = () => {
    post({
        url: '/org/hrEmployee/getList',
        data: { code: pageData.userCode },
    }).then(({ data, code }: any) => {
        if (code === 200) {
            if (data.length != 0) {
                pageData.userName = data[0].name
                pageData.userId = data[0].id
            } else {
                Message.error({
                    content: '卡号不存在',
                    duration: 6000,
                })
            }

        } else {
            Message.error({
                content: '用户不存在',
                duration: 6000,
            })
        }
    })
}
const huiche = async () => {
    try {
        const res1 = await post({
            url: '/dwPc/DyeFormulaYield/getCrockCalorie',
            data: { formulaCode: pageData.formulaCode },
        });
        const { data, code } = res1;
        if (code === 200) {
            pageData.circulatCard = data[0].circulatCard;
            pageData.brandName = data[0].brandName;
            pageData.colorCode = data[0].colorCode;
            pageData.colorName = data[0].colorName;
            pageData.machineCode = data[0].machineCode;
            pageData.planOrderCode = data[0].planOrderCode;
            pageData.customName = data[0].customName;
            pageData.horseNum = data[0].horseNum;
            pageData.weight = data[0].weight;
            pageData.workNature = data[0].workNature;
            pageData.stepTotalNum = data[0].stepTotalNum;
            pageData.processTime = data[0].processTime;
            pageData.crockCalorieId = data[0].crockCalorieId;
            const res2 = await post({
                url: '/dwPc/DyeFormulaYieldDetail/getCrockCalorieDetail',
                data: { crockCalorieID: pageData.crockCalorieId },
            });
            const { data: data2, code: code2 } = res2;
            if (code2 === 200) {
                table.handleSuccess(data2);
                gridOption.value.setRowData(data2);
                pageData.stepTotalNum = data2.length
            }
        }
    } catch (error) {
        console.log(error);
    } finally {
        pageData.pageLoading = false;
    }
};
const formRef = ref<FormInstance>()
const save = async () => {
    if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return
    } else {
        pageData.DyeFormulaYieldDetail = gridOption.value.getSelectedRows()
        try {
            const res1 = await post({
                url: '/dwPc/DyeFormulaYield/save',
                data: pageData,
            });
            const { data, code } = res1;
            if (code === 200) {
                formRef.value?.resetFields()
                Message.success({
                    content: '保存成功',
                    duration: 6000,
                })
                const res2 = await post({
                    url: '/dwPc/DyeFormulaYieldDetail/getCrockCalorieDetail',
                    data: { crockCalorieID: pageData.crockCalorieId },
                });
                const { data: data2, code: code2 } = res2;
                if (code2 === 200) {
                    table.handleSuccess(data2);
                    gridOption.value.setRowData(data2);
                    pageData.stepTotalNum = data2.length
                }
            }
        } catch (error) {
            console.log(error);
        } finally {
            pageData.pageLoading = false;
        }
    }

};
const qingkong = () => {
    Object.keys(pageData).forEach(key => {
        pageData[key] = null;
    });
    tableDataList.value = []
}
const table = useTable();
</script>
<script lang="ts">
export default {
    name: "DyeingFormulaScanningDemo",
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>

